<template>
  <div class="loginImg">
    <div class="container">
      <Row>
        <Col span="15">
        <div class="leftTips">
          <h3>[ iView2 + Vue + Webpack ]</h3>
          <h6>欢迎使用 iView2 UI后台框架</h6>
          <ul class="leftTipUl">
            <li><a href="javascript:void(0);">
              <Icon type="navigate"></Icon>
              number one</a></li>
            <li><a href="javascript:void(0);">
              <Icon type="navigate"></Icon>
              number two</a></li>
            <li><a href="javascript:void(0);">
              <Icon type="navigate"></Icon>
              number three</a></li>
            <li><a href="javascript:void(0);">
              <Icon type="navigate"></Icon>
              number four</a></li>
          </ul>
          <h6>暂无帐号，那赶紧<a href="javascript:void(0);" class="register">注册吧</a></h6>
        </div>
        </Col>
        <Col span="9">
        <div class="rightBox">
          <h4>登录：</h4>
          <label>登录到 iView2 后台主题UI框架</label>
          <Form ref="formValidate" :model="formValidate" :rules="ruleValidate">
            <FormItem prop="username">
              <Input type="text" v-model="formValidate.username" icon="ios-person" placeholder="账号" class="loginInput"
                     @on-enter="submitLogin('formValidate')"/>
            </FormItem>
            <FormItem prop="password">
              <Input v-model="formValidate.password" icon="ios-locked" placeholder="密码" class="loginInput mt15"
                     type="password" @on-enter="submitLogin('formValidate')"/>
            </FormItem>
            <a href="javascript:void(0);" class="register mt15">忘记密码？</a>
            <FormItem>
              <Button type="info" class="loginBtn" @click="submitLogin('formValidate')">登录</Button>
            </FormItem>
          </Form>
        </div>
        </Col>
      </Row>
      <div class="footerTip">
        &copy;2016-2017 By BaoMiDou


      </div>
    </div>
  </div>
</template>

<script>
  import storage from 'utils/helpers/storageLite';

  export default {
    name: 'login',
    data () {
      return {
        formValidate: {
          username: '',
          password: ''
        },
        ruleValidate: {
          username: [
            {required: true, message: '用户名不能为空', trigger: 'blur'}
          ],
          password: [
            {required: true, message: '密码不能为空', trigger: 'blur'},
            {type: 'string', min: 6, message: '密码长度不能小于6位', trigger: 'blur'}
          ]
        }
      };
    },
    methods: {
      submitLogin (name) {
        this.$refs[name].validate((valid) => {
          if (valid) {
            storage.set('user', this.formValidate.username);
            this.$Message.success('提交成功');
            this.$router.push({path: '/'});
          }
        })
      }
    },
    mounted () {
      if (storage.get('username')) {
        this.formValidate.username = storage.getParse('username');
      }
      if (storage.get('password')) {
        this.formValidate.password = storage.getParse('password');
      }
    }
  };
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less">
  .loginImg {
    width: 100%;
    height: 100%;
    background: url('../../../../../static/image/login-background.jpg');
    background-size: cover;
    position: absolute;
    filter: progid:DXImageTransform.Microsoft.AlphaImageLoader(src='../../../../../static/image/login-background.jpg', sizingMethod='scale');
  }

  .container {
    width: 750px;
    margin: 0 auto;
    padding-top: 10%;
  }

  /** 左侧提示文字 **/
  .leftTips {
    text-align: left;
    padding-right: 5%;
    color: #ffffff;
    h3 {
      font-size: 25px;
    }
    h6 {
      margin-top: 8px;
      font-size: 14px;
    }
    .leftTipUl {
      margin: 25px 0;
      padding: 0;
      a {
        font-size: 16px;
        color: #ffffff;
        i {
          margin-right: 10px;
        }
      }
    }
  }

  /** 右侧登录框 **/
  .rightBox {
    padding: 30px;
    border-radius: 3px;
    box-shadow: 0 3px 0 rgba(12, 12, 12, .03);
    border: 1px solid rgba(255, 255, 255, 0.3);
    background-color: rgba(255, 255, 255, 0.2);
    h4 {
      color: #ffffff;
      font-size: 14px;
      margin: 0 !important;
    }
    label {
      color: #ffffff;
      font-size: 12px;
      margin: 20px 0;
      display: inline-block;
    }
    .loginInput {
      width: 100%;
    }
    .mt15 {
      margin-top: 15px;
    }
    .ivu-form-item {
      margin-bottom: 8px;
    }
  }

  .rightBox, .leftTips {
    .register {
      margin-left: 5px;
      font-weight: 400;
      display: inline-block;
      color: #2d8cf0;
      &:hover {
        color: #5cadff;
      }
    }
  }

  .loginBtn {
    display: block;
    width: 100%;
    margin-top: 10px;
  }

  .footerTip {
    border-top: 1px solid rgba(255, 255, 255, 0.2);
    padding-top: 10px;
    margin-top: 25px;
    color: #ffffff;
  }
</style>
